<template>
    <div class="amount-container">
        <template v-if="phone">
            <div class="item">
                <div class="title">总投资金额</div>
                <div class="amount">￥{{ financeInfo.invest / 10000 }}万</div>
            </div>
            <div class="item">
                <div class="title">投资项目数</div>
                <div class="amount">{{ financeInfo.count }}</div>
            </div>
            <div class="item">
                <div class="title">预计总收益</div>
                <div class="amount">￥{{ financeInfo.revenue / 10000 }}万</div>
            </div>
        </template>
        <template v-else>
            <div class="item text" @click="$router.push('/bindPhone')">绑定手机号，查看资金情况</div>
        </template>
    </div>
</template>
<script>
    import { finance } from "@/api/userInfo";
    export default {
        props: {
            phone: {
                type: String,
                default: "",
            },
        },
        data() {
            return {
                financeInfo: {},
            };
        },
        mounted() {
            this.getMyFinance();
        },
        methods: {
            getMyFinance() {
                finance({}).then((res) => {
                    this.financeInfo = res;
                });
            },
        },
    };
</script>
<style lang="scss" scoped>
    .amount-container {
        background: linear-gradient(90deg, #cf9d5c 0%, #e5be82 100%);
        min-height: 130px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        .item {
            color: #fff;
            .title {
                font-size: 16px;
            }
            .amount {
                font-size: 14px;
                margin-top: 20px;
                text-align: center;
            }
        }
        .text {
            text-decoration: underline;
            font-size: 18px;
        }
    }
</style>